<template>
  <a-list itemLayout="horizontal" :dataSource="data">
    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
      <a-list-item-meta>
        <a-avatar slot="avatar" :size="48" :style="'backgroundColor:' + item.color" :icon="item.avatar"/>
        <a slot="title">{{ item.title }}</a>
        <span slot="description">
          <span class="binding-list-description">{{ item.description }}</span>
          <span v-if="item.value"> : </span>
          <span class="binding-list-value">{{ item.value }}</span>
        </span>
      </a-list-item-meta>
      <template>
        <a slot="actions" @click="callback(item)">{{ item.value ? '修改' : '绑定' }}</a>
      </template>
    </a-list-item>
    <a-modal
      :destroyOnClose="true"
      :title="lcModa.title"
      v-model="lcModa.visible"
      :footer="null"
      :maskClosable="false"
      width="1200px">
      <component
        v-if="lcModa.visible"
        :is="lcModa.formComponent"
        @init="init"
        @close="lcModa.visible=false"></component>
    </a-modal>
  </a-list>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  
  export default {
    name: 'Binding',
    data () {
      return {
        data: [
          { title: '手机号绑定', avatar: 'mobile', component: 'Mobile', color:'#1890FF', description: '未绑定手机号', value: '', disabled: false},
          { title: '电子邮箱绑定', avatar: 'mail', component: 'Email', color:'#2B6ECB', description: '未绑定电子邮箱', value: '', disabled: false},
          { title: '支付宝绑定', avatar: 'alipay', component: 'Alipay', color:'#1576FE', description: '未绑定支付宝', value: '', disabled: true},
          { title: '微信绑定', avatar: 'wechat', component: 'WeChat', color:'#21AD37;', description: '未绑定微信', value: '', disabled: true},
          { title: 'QQ绑定', avatar: 'qq', component: 'QQ', color:'#4CAFEA;', description: '未绑定QQ', value: '', disabled: true},
          { title: '微博绑定', avatar: 'weibo', component: 'Weibo', color:'#E6162D;', description: '未绑定微博', value: '', disabled: true},
          { title: '钉钉绑定', avatar: 'dingding', component: 'Dingtalk', color:'#0076F6;', description: '未绑定钉钉', value: '', disabled: true}
        ],
        lcModa: {
          title: '',
          visible: false,
          formComponent: ''
        }
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.info
      })
    },
    created() {
      this.init()
    },
    methods: {
      ...mapActions(['GetInfo']),
      init () {
        this.GetInfo().then((res) => {
          if(this.userInfo.phone) {
            this.data[0].value = this.userInfo.phonenumber
            this.data[0].description = '手机号'
          }
          if(this.userInfo.email) {
            this.data[1].value = this.userInfo.email
            this.data[1].description = '电子邮箱'
          }
        })
      },
      callback(r) {
        if(r.disabled) {
          this.$message.info('功能完善中...')
          return
        }
        this.lcModa.visible = true
        this.lcModa.value = r.value
        this.lcModa.title = (r.value ? '修改' : '') + r.title
        this.lcModa.formComponent = () => import(`./${r.component}`)
      }
    }
  }
</script>

<style scoped>

</style>